<template>
  <div class="app-container" v-permission="['admin','order:list',]">
    <!--工具栏-->
    <div class="head-container">
      <!-- <el-radio-group 
        v-model="flag"
      >
        <template v-for="item in flagList">
          <el-radio-button 
            :key="item.id" 
            :label="item.id"
          >
          {{item.text}}
          </el-radio-button>
        </template>
      </el-radio-group> -->
      <crudOperation>
        <div class="order-crud-left" slot="left">
          <el-button
            @click="onRemoveAll"
            class="filter-item"
            type="primary"
            size="mini"
          >全部标记为已读</el-button>
        </div>
      </crudOperation>
    </div>
    <!--表格渲染-->
    <el-table
      @selection-change="crud.selectionChangeHandler"
      @sort-change="crud.sortChange"
      v-loading="crud.loading"
      :data="crud.data"
      ref="table"
    >
      <el-table-column
        v-if="columns.visible('content')"
        label="消息内容"
        prop="title"
      >
        <template slot-scope="{row}">
          <div class="msg-body" @click="onTapMessageTo(row)">
            <template v-if="row.isLook === 1">
              <div class="no-read"></div>
            </template>
            <messageTitle class="title" :title="row.title" />
          </div>
        </template>
      </el-table-column>
      <el-table-column
        v-if="columns.visible('createTime')"
        label="消息时间"
        prop="createTime"
      />
      <el-table-column
        v-if="columns.visible('messageId')"
        label="订单编号"
        prop="messageId"
      />
    </el-table>
    <!--分页组件-->
    <pagination />
  </div>
</template>

<script>
import messageTitle from "@/views/system/user/message/module/title";
import CRUD, { presenter, header } from "@crud/crud";
import { removeByType } from "@/api/system/message";
import crudOperation from "@crud/CRUD.operation";
import { findComponentByName } from "@/utils";
import rrOperation from "@crud/RR.operation";
import pagination from "@crud/Pagination";
import messageJs from "@/mixins/message";

let defaultCrud = CRUD({
  url: 'api/message/getAllList',
  hideColumns: ['messageId'],
  title: '消息中心',
});

export default {
  name: "userMessage",
  components: { rrOperation, pagination, crudOperation, messageTitle},
  mixins: [presenter(defaultCrud), header(), messageJs],
  data() {
    return {
      flagList: [
        { id: 0, text: "全部消息" },
        { id: 1, text: "订单消息" }
      ],
      flag: 0,
    }
  },
  methods: {
    onRemoveAll() {
      removeByType().then(() => {
        this.crud.refresh();
        this._refreshMessage();
      });
    },
    _refreshMessage() {
      let vueEl = findComponentByName(this.$root, "MessageNotice");
      vueEl.refresh();
    }
  }
}
</script>

<style lang="scss" scoped>
.msg-body {
  align-items: center;
  cursor: pointer;
  display: flex;

  .no-read {
    background-color: #d9001b;
    border-radius: 50%;
    height: 5px;
    width: 5px;
  }

  .title {
    padding: 5px;
  }
}
</style>